<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>animation-timing-function_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com"/>
    <meta name="copyright" content="www.doyoe.com"/>
    <style>
        h1 {
            font-size: 16px;
        }

        div {
            width: 60px;
            height: 60px;
            margin: 200px 0 0 50px;
            padding: 10px;
            border-radius: 41px;
            box-shadow: 0 0 10px rgba(204, 102, 0, .8);
            background: #F6D66E;
            background: -moz-linear-gradient(top, #fff, #F6D66E);
            background: -webkit-linear-gradient(top, #fff, #F6D66E);
            background: -o-linear-gradient(top, #fff, #F6D66E);
            background: -ms-linear-gradient(top, #fff, #F6D66E);
            background: linear-gradient(top, #fff, #F6D66E);
            -moz-animation: animations 4s linear infinite;
            -webkit-animation: animations 4s ease-in-out infinite;
            -o-animation: animations 4s linear infinite;
            -ms-animation: animations 4s linear infinite;
            animation: animations 4s linear infinite;
        }

        @-webkit-keyframes animations {
            0% {
                -webkit-transform: translate(0, 0);
            }
            12% {
                -webkit-transform: translate(80px, -25px);
            }
            25% {
                -webkit-transform: translate(200px, -50px);
            }
            38% {
                -webkit-transform: translate(320px, -25px);
            }
            50% {
                -webkit-transform: translate(400px, 0);
            }
            62% {
                -webkit-transform: translate(320px, 25px);
            }
            75% {
                -webkit-transform: translate(200px, 50px);
            }
            87% {
                -webkit-transform: translate(80px, 25px);
            }
            100% {
                -webkit-transform: translate(0, 0);
            }
        }

        @-moz-keyframes animations {
            0% {
                -moz-transform: translate(0, 0);
            }
            12% {
                -moz-transform: translate(80px, -25px);
            }
            25% {
                -moz-transform: translate(200px, -50px);
            }
            38% {
                -moz-transform: translate(320px, -25px);
            }
            50% {
                -moz-transform: translate(400px, 0);
            }
            62% {
                -moz-transform: translate(320px, 25px);
            }
            75% {
                -moz-transform: translate(200px, 50px);
            }
            87% {
                -moz-transform: translate(80px, 25px);
            }
            100% {
                -moz-transform: translate(0, 0);
            }
        }

        @-o-keyframes animations {
            0% {
                -o-transform: translate(0, 0);
            }
            12% {
                -o-transform: translate(80px, -25px);
            }
            25% {
                -o-transform: translate(200px, -50px);
            }
            38% {
                -o-transform: translate(320px, -25px);
            }
            50% {
                -o-transform: translate(400px, 0);
            }
            62% {
                -o-transform: translate(320px, 25px);
            }
            75% {
                -o-transform: translate(200px, 50px);
            }
            87% {
                -o-transform: translate(80px, 25px);
            }
            100% {
                -o-transform: translate(0, 0);
            }
        }

        @-ms-keyframes animations {
            0% {
                -ms-transform: translate(0, 0);
            }
            12% {
                -ms-transform: translate(80px, -25px);
            }
            25% {
                -ms-transform: translate(200px, -50px);
            }
            38% {
                -ms-transform: translate(320px, -25px);
            }
            50% {
                -ms-transform: translate(400px, 0);
            }
            62% {
                -ms-transform: translate(320px, 25px);
            }
            75% {
                -ms-transform: translate(200px, 50px);
            }
            87% {
                -ms-transform: translate(80px, 25px);
            }
            100% {
                -ms-transform: translate(0, 0);
            }
        }

        @keyframes animations {
            0% {
                transform: translate(0, 0);
            }
            12% {
                transform: translate(80px, -25px);
            }
            25% {
                transform: translate(200px, -50px);
            }
            38% {
                transform: translate(320px, -25px);
            }
            50% {
                transform: translate(400px, 0);
            }
            62% {
                transform: translate(320px, 25px);
            }
            75% {
                transform: translate(200px, 50px);
            }
            87% {
                transform: translate(80px, 25px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
    </style>
</head>
<body>
<h1>线性运动的太阳（您还可以定义其它的动画过渡类型，如ease-in,ease-out等）：</h1>
<div></div>
<p></p>
</body>
</html>
